<template>
  <el-select
    v-model="value"
    @change="changeValue"
    clearable
    placeholder="请选择"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
  import findAll from "@/api/roles.js";
  export default {
    props: ['checked'], //自定义属性
    data() {
      return {
        options: [],
        value: "",
      };
    },
    // 钩子函数 渲染出来的时候，请求后台查询数据
    created() {
      findAll()
        .then((res) => {
          console.log(res);
          this.options = res.data;
        })
        .catch();
    },
    methods: {
      changeValue() {
        console.log(this.value);
        //把改变后的角色id传回去
        this.$emit('changeRole',this.value)
      },
    },
    // 计算属性
    computed:{

    },
    //监听:有个前提条件(默认情况)，必须新旧值发生变化，才能触发！
    watch:{
      checked:{
        handler(newValue,oldValue){
          console.log(newValue,'新---旧',oldValue);
          this.value = newValue;
        },
        //这个设置 可以让第一次点击，也触发这个监听事件
        immediate:true
      }
    }
  };
</script>